<template>
    <view class="box">
        <view class="navcon">
      <u-navbar placeholder title="公告" @rightClick="rightClick" :autoBack="true">
      </u-navbar>
    </view>
      <view class="content">
        <view class="msg" @click="skip">
          <view class="time">2023-04-28 17:09</view>
          <view class="msg_box">
            <view class="top">
              <view class="title">五一去哪玩</view>
              <view class="img">
                <scroll-view scroll-x="true" class="scroll">
                  <view v-for="(item, index) in image" :key="index" class="item">
                    <image class="con_img" :src="item.img" alt="" />
                  </view>
                </scroll-view>
              </view>
            </view>
            <view class="skip">
              <view class="content_box">
                查看详细
                <image
                  src="http://zyqny.zmycode.top/%E5%90%91%E5%8F%B3%E7%AE%AD%E5%A4%B4%20%281%29.png"
                  alt=""
                />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </template>
  <script setup>
  import { ref } from "vue";
  const skip = () => {
    uni.navigateTo({
      url: "/pages/noticedetail/noticedetail",
    });
  };
  const image = ref([
    {
      img: "http://zyqny.zmycode.top/1698719353144.jpg",
    },
    {
      img: "http://zyqny.zmycode.top/1698719353144.jpg",
    },
    {
      img: "http://zyqny.zmycode.top/1698719353144.jpg",
    },
    {
      img: "http://zyqny.zmycode.top/1698719353144.jpg",
    },
    {
      img: "http://zyqny.zmycode.top/1698719353144.jpg",
    },
    {
      img: "http://zyqny.zmycode.top/1698719353144.jpg",
    },
  ]);
  </script>
  <style lang="scss" scoped>
  .box {
    background-color: #f5f5f5;
    height: 100%;
    .content {
      width: 90%;
      margin: 0 auto;
  
      .msg {
        .time {
          color: #666;
          padding: 20rpx 0;
          text-align: center;
        }
        .msg_box {
          border-radius: 10rpx;
          padding: 10rpx 20rpx;
          box-sizing: border-box;
          background-color: #fff;
          .top {
            padding-bottom: 10rpx;
            box-sizing: border-box;
            border-bottom: 1px solid #eee;
            .title {
              margin: 20rpx 0rpx 40rpx 0;
            }
            .img {
              display: flex;
              gap: 0rpx 10rpx;
              .con_img {
                width: 160rpx;
                height: 200rpx;
              }
              .scroll {
                overflow: hidden;
                display: flex;
                width: 1000rpx;
                white-space: nowrap;
                .item {
                  margin-left: 10rpx;
                  height: 200rpx;
                  display: inline-block;
                }
                .item:first-child {
                  margin: 0;
                }
              }
            }
          }
          .skip {
            .content_box {
              color: #666;
              font-size: 28rpx;
              padding: 20rpx;
              box-sizing: border-box;
              background-color: #fff;
              display: flex;
              align-items: center;
              justify-content: space-between;
              image {
                width: 30rpx;
                height: 30rpx;
              }
            }
          }
        }
      }
    }
  }
  </style>
  